<script lang="ts" setup>
    import {reactive, ref,type Component,computed} from "vue";
    import index from "./shop/index.vue";
    import list from "./shop/list.vue";
    import user from "./shop/user.vue";

    const table=[
        {id:1,name:"index",label:"首页"},
        {id:2,name:"list",label:"购物车列表"},
        {id:3,name:"user",label:"用户信息"}
    ];
    const tabComponent={
        "index":index,
        "list":list,
        "user":user
    }

    let curTab=ref("index");
    let curComponent=computed(()=>tabComponent[curTab.value])

</script>

<template>
    <div class="tab">
        <button v-for="i in table" key="i.id" class="tabButton" @click="curTab=i.name">{{ i.label }}</button>
    </div>
    <div class="compt">
        <KeepAlive>
            <component :is="curComponent"></component>
        </KeepAlive>
    </div>
</template>
  
<style scoped>
    .tab{
        width: 700px;
        text-align: center;
        margin: auto;
    }
    .compt{
        width: 700px;
        text-align: center;
        margin: auto;
    }
    .tabButton{
        width: 100px;
        height: 40px;
    }
</style>